<template>
	<view class="wrapper">
    <view class="bank">
      <view class="tip">用于提现,请认真填写!</view>
      <u--form
          labelPosition="left"
          :model="postForm"
          :rules="rules"
          ref="uForm"
          class="form"
          labelWidth="160rpx"
          labelAlign="right"
          :labelStyle="{'font-size': '24rpx', 'padding-right': '20rpx', 'margin-top': '-3rpx'}"
      >
        <u-form-item label="姓名:" prop="nickname">
          <u--input
              v-model="postForm.nickname"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
          ></u--input>
        </u-form-item>
        <u-form-item label="银行名称:" prop="bank_name">
          <u--input
              v-model="postForm.bank_name"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
          ></u--input>
        </u-form-item>
        <u-form-item label="开户行:">
          <u--input
              v-model="postForm.bank_x"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
          ></u--input>
        </u-form-item>
        <u-form-item label="卡号:" prop="bank_number">
          <u--input
              v-model="postForm.bank_number"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
          ></u--input>
        </u-form-item>
        <u-form-item label="预留手机:" prop="mobile">
          <u--input
              v-model="postForm.mobile"
              border="surround"
              fontSize="24rpx"
              :customStyle="{'height': '30rpx'}"
          ></u--input>
        </u-form-item>
        <u-button type="success" class="btn" :color="activeColor" @click="save" text="保存"></u-button>
      </u--form>
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import base64 from '../../util/base64'
import Service from '../../api/service'
const serviceModel = new Service()

	export default {
		data() {
			return {
        activeColor: color.main_color,
			  postForm: {
			    nickname: '',
          bank_name: '',
          bank_x: '',
          bank_number: '',
          mobile: '',
        },
        rules: {
          nickname: {
            type: 'string',
            required: true,
            message: '请填写姓名',
            trigger: ['blur', 'change']
          },
          bank_name: {
            type: 'string',
            required: true,
            message: '请填写银行名称',
            trigger: ['blur', 'change']
          },
          // bank_x: {
          //   type: 'string',
          //   required: true,
          //   message: '请填写银行开户行',
          //   trigger: ['blur', 'change']
          // },
          bank_number: {
            type: 'number',
            required: true,
            message: '请填写银行卡号,必须是数字',
            trigger: ['blur', 'change']
          },
          mobile: {
            type: 'string',
            required: true,
            message: '请填写预留手机号码',
            trigger: ['blur', 'change']
          },
        },
			}
		},
    onReady() {
      //onReady 为uni-app支持的生命周期之一
      // this.$refs.uForm.setRules(this.rules)
    },
		onLoad() {
      this.fetch()
		},
		methods: {
      fetch() {
        serviceModel.bankFetch().then(response => {
          let { data } = response
          data = base64.parse(data)
          // console.log(data)
          this.postForm = data.bank || {}
        })
      },
      save() {
        this.$refs.uForm.validate().then(res => {
          // console.log(res)
          if (res) {
            serviceModel.bankSave({ ...this.postForm }).then(() => {
              uni.showToast({
                icon: 'none',
                title: '保存成功'
              })
            })
          }
        }).catch(e => {
          // console.log(e)
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
.wrapper {
  background: $background_color;
  padding: 20rpx;
  .bank {
    padding: 20rpx;
    background: white;
    font-size: 24rpx;
    .tip {
      font-weight: 700;
      height: 30px;
    }
    .form {
      .btn {
        margin-top: 20px;
      }
    }
  }
}
</style>
